<template>
    <div class="radar-box">
        <div :style="{ width: width + 'px' }" style="margin-bottom: 30px;"><custom-title :title="title" /></div>
        <div class="rank-box" :style="{ width: width + 'px', height: height + 'px' }">
            <ResponsiveBarChart :options="chartOptions" @bar-clicked="onBarClicked" />
        </div>
    </div>
</template>
  
<script>
import ResponsiveBarChart from '@/components/echarts/ResponsiveBarChart.vue';
import * as echarts from 'echarts';
export default {
    name: 'annular',
    components: {
        ResponsiveBarChart,
    },
    props: {
        width: {
            type: Number,
            default: 600
        },
        height: {
            type: Number,
            default: 300
        },
        title: {
            type: String,
            default: '预警分析',
        },
        chartsTitle: {
            type: String,
            default: '饭量',
        },
        colorStart: {
            type: Array,
            default: () => [
                'rgba(143, 171, 191, 1)',
                'rgba(255, 201, 122, 1)',
                'rgba(255, 119, 52, 1)',
                'rgba(102, 225, 223, 1)',
            ],
        },
        colorEnd: {
            type: Array,
            default: () => [
                'rgba(143, 171, 191, .1)',
                'rgba(255, 201, 122, .1)',
                'rgba(255, 119, 52, .1)',
                'rgba(102, 225, 223, .1)',
            ],
        },
        seriesData: {
            type: Array,
            default: () => [
                { date: '一月', mayun: 10, jianlin: 20, huateng: 30, jiayin: 40 },
                { date: '二月', mayun: 100, jianlin: 20, huateng: 30, jiayin: 240 },
                { date: '三月', mayun: 10, jianlin: 2, huateng: 30, jiayin: 10 },
                { date: '四月', mayun: 50, jianlin: 20, huateng: 30, jiayin: 40 },
                { date: '五月', mayun: 100, jianlin: 120, huateng: 300, jiayin: 140 },
                { date: '六月', mayun: 80, jianlin: 20, huateng: 30, jiayin: 40 },
                { date: '七月', mayun: 10, jianlin: 210, huateng: 30, jiayin: 40 },
            ],
        },
        filterSeriesData: {
            type: Array,
            default: () => [
                { name: '马云', prop: 'mayun' },
                { name: '建林', prop: 'jianlin' },
                { name: '化腾', prop: 'huateng' },
                { name: '家印', prop: 'jiayin' }
            ],
        },
    },
    data() {
        return {
            chartOptions: {},
        }
    },
    computed: {},
    watch: {},
    methods: {
        filterSeries() {
            const series = this.filterSeriesData.map((name, index) => {
                return {
                    name: name.name,
                    type: 'bar',
                    data: this.seriesData.map(item => item[name.prop]),
                    barWidth: 7,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: this.colorStart[index] },
                                    { offset: 1, color: this.colorEnd[index] }
                                ],
                                false
                            )
                        }
                    }
                };
            });
            console.log(series)
            return series;
        },
        onBarClicked(params) {
            console.log(params);
            // 在这里处理点击事件，例如弹出模态框显示更多数据
        },
        getOption() {
            this.chartOptions = {
                tooltip: {
                    trigger: 'axis', // 触发方式，对于柱状图通常使用 'axis'
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: (params) => {
                        // 自定义提示框的内容，params 是一系列数据项的信息
                        var result = '';
                        params.forEach((item, index) => {
                            const color = this.colorStart[index]
                            result += '<span style="display:inline-block;margin-right:5px;border-radius:5px;width:5px;height:5px;background-color:' + color + '"></span>';
                            result += item.seriesName + ': ' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + item.value + '<br/>';
                        });
                        let result2 = this.chartsTitle + '<br/>' + result
                        return result2;
                    }
                },
                legend: {
                    data: this.filterSeriesData.map(item => item.name), // 图例项的名称
                    orient: 'horizontal', // 图例的方向，可选 'vertical' 或 'horizontal'
                    itemWidth: 12,
                    itemHeight: 12,
                    top: '1', // 图例的位置，可以是 'top', 'bottom', 'left', 'right' 或具体的像素值
                    selectedMode: true, // 是否启用图例的选中功能
                    textStyle: {
                        color: '#ffffff'
                    },
                },
                xAxis: {
                    type: 'category',
                    barCategoryGap: '30',
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(217, 231, 255, 1)'
                        }
                    },
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(217, 231, 255, 1)'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(255, 255, 255, 0.15)'
                        }
                    },
                },
                series: this.filterSeries()
            }
        }
    },
    created() {
        this.getOption()
    },
    mounted() { },
}
</script>
  
<style lang='less' scoped></style>


